<!DOCTYPE html>
<html lang=en>


<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <style>
    body {
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100vh;
      background: #fff;
    }

    .loading-page {
      height: 80%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .wrapper {
      width: 20rem;
      height: 5rem;
      position: absolute;
      left: 50%;
      margin-top: 20%;
      transform: translate(-50%, -50%);
    }

    .circle {
      width: 2rem;
      height: 2rem;
      position: absolute;
      border-radius: 50%;
      background-color: #7ad6d2;
      left: 15%;
      transform-origin: 50%;
      animation: circle .5s alternate infinite ease;
    }

    @keyframes circle {
      0% {
        top: 5rem;
        height: 0.2rem;
        border-radius: 5rem 5rem 2.5rem 2.5rem;
        transform: scaleX(1.5);
      }

      40% {
        height: 1rem;
        border-radius: 50%;
        transform: scaleX(1);
      }

      100% {
        top: 0%;
      }
    }

    .circle:nth-child(2) {
      left: 45%;
      animation-delay: .2s;
    }

    .circle:nth-child(3) {
      left: auto;
      right: 15%;
      animation-delay: .3s;
    }

    .shadow {
      width: 2rem;
      height: 0.2rem;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, .5);
      position: absolute;
      top: 5.05rem;
      transform-origin: 50%;
      z-index: -1;
      left: 15%;
      filter: blur(1px);
      animation: shadow .5s alternate infinite ease;
    }

    @keyframes shadow {
      0% {
        transform: scaleX(1.5);
      }

      40% {
        transform: scaleX(1);
        opacity: .7;
      }

      100% {
        transform: scaleX(.2);
        opacity: .4;
      }
    }

    .shadow:nth-child(4) {
      left: 45%;
      animation-delay: .2s
    }

    .shadow:nth-child(5) {
      left: auto;
      right: 15%;
      animation-delay: .3s;
    }

    .wrapper span {
      position: absolute;
      top: 5.5rem;
      font-family: 'Lato';
      font-size: 1.5rem;
      letter-spacing: 1.3rem;
      color: #7ad6d2;
      left: 15%;
    }



    .logo-container {
      width: 100%;
      height: 2rem;
      position: absolute;
      margin-top: 55%;
      display: flex;
      justify-content: center;
      align-content: center;
    }

    .address-container {
      width: 100%;
      height: 20px;
      position: absolute;
      margin-top: 15%;
      display: flex;
      justify-content: center;
      align-content: center;
      color: gray;
      animation: fade 1.5s ease-in forwards;
      font-size: 12px;
    }

    .address-container img {
      width: 1rem;
      height: 1rem;
      margin-right: 0.5rem;
      justify-content: center;
      align-content: center;
      display: flex;
    }

    .address-container span {
      line-height: 1.1rem;
      /* padding-top: 0.3rem; */
      align-content: center;
    }

    .text {
      stroke: #ffffff;
      fill: none;
      stroke-width: 8;
      stroke-dasharray: 0, 300;
      /*观察此属性的变化*/
      stroke-dashoffset: 0;
      font-size: 20.5rem;
      font-family: "Adobe 楷体 Std R", SansSerif, sans-serif;
    }

    .animals {
      box-shadow: 9px 9px 11px 9px rgba(108, 223, 99, 1);
    }

    .animals:nth-child(2) {
      stroke: #8fd67a;
      animation: stroke1 1s ease-in-out forwards;
    }

    .animals:nth-child(3) {
      stroke: #30e3e9;
      animation: stroke2 1s cubic-bezier(0.37, 0.1, 0.58, 1) forwards;
    }

    @keyframes stroke1 {
      100% {
        stroke-dasharray: 180, 200;
        stroke-dashoffset: 600;
      }
    }

    @keyframes stroke2 {
      100% {
        stroke-dasharray: 180, 200;
        stroke-dashoffset: 400;
        stroke-width: 12;
      }
    }

    @keyframes fade {
      0% {
        opacity: 0;
      }

      80% {
        opacity: 0.5;
      }

      100% {
        opacity: 1;
      }
    }
  </style>
</head>

<body>
  <noscript><strong>We're sorry but this doesn't work properly without JavaScript enabled. Please enable
      it to continue.</strong></noscript>
  <div class="loading-page" id="loadingPage" style="min-height:755px;background: #ffffff;">
    <div class="wrapper">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="shadow"></div>
      <div class="shadow"></div>
      <div class="shadow"></div>
      <span>Loading</span>
    </div>
    <div class="logo-container">
      <svg viewBox="0 0 4000 1200" height="4rem" version="1.2" xmlns="http://www.w3.org/2000/svg">
        <symbol id="text">
          <text text-anchor="middle" x="50%" y="50%" dy=".35em" id="version">
            V1.3.5.8.4
          </text>
        </symbol>
        <use xlink:href="#text" class="text animals"></use>
        <use xlink:href="#text" class="text animals"></use>
      </svg>

      <div class="address-container">
        <img
          src="">
        <span id="github_url"> https://github.com/TonyJiangWJ/Ant-Forest</span>
      </div>
    </div>

  </div>

  <script>
    function setVersion(version) {
      document.getElementById('version').innerHTML = version
      localStorage.setItem('version', version)
    }
    function setGithubUrl(url) {
      document.getElementById('github_url').innerHTML = url
    }
    window.onload = () => {
      let storeVersion = localStorage.getItem('version')
      if (storeVersion) {
        document.getElementById('version').innerHTML = storeVersion
      }
    }
  </script>
</body>

</html>